<template>
  <Navbar :toggleBookmark="toggleBookmark" :showBookmark="showBookmark" />

  <div v-show="!showBookmark">
    <van-tabs v-model:active="componentName">
      <van-tab title="头条" name="Hot"></van-tab>
      <van-tab title="娱乐" name="Entertainment"></van-tab>
      <van-tab title="金融" name="Finance"></van-tab>
      <van-tab title="运动" name="Sport"></van-tab>
    </van-tabs>

    <KeepAlive>
      <component :is="tabs[componentName]"></component>
    </KeepAlive>
  </div>

  <van-back-top />

  <Bookmark v-show="showBookmark" />
</template>

<script setup>
import Navbar from "@/ui/Navbar.vue";
import Hot from "@/features/hot/Hot.vue";
import Entertainment from "@/features/entertainment/Entertainment.vue";
import Finance from "@/features/finance/Finance.vue";
import Sport from "@/features/sport/Sport.vue";
import Bookmark from "@/features/bookmark/Bookmark.vue";

import { useToggleBookmark } from "@/hooks/useBookmark";
import { ref } from "vue";

const componentName = ref("Hot");
const tabs = { Hot, Entertainment, Finance, Sport };

const { showBookmark, toggleBookmark } = useToggleBookmark();
</script>
